import React, { useState, useRef, use, useEffect } from 'react';
import { NavBar, Button, Tag, Popup } from 'react-vant';
import { ArrowLeft, Close } from '@react-vant/icons';
import { useNavigate } from 'react-router-dom';
import './vipcard.css';
import axios from 'axios';
export default function VipCard() {
  // const [price, setPrice] = useState(0)
  // const [frequency, setFrequency] = useState(0)
  const [prices,setPricrs]=useState({})
  const navigate = useNavigate();
  const [showRechargePopup, setShowRechargePopup] = useState(false);
  let alipayForm = useRef();
  // VIP 会员信息
  const vipInfo = {
    cardNumber: '1337105826',
    balance: `￥${prices.price==undefined?0:prices.price}`,
    // points: prices.frequency,
    freeStays: `${prices.frequency==undefined?0:prices.frequency}次 (限门市价399元以下房型任选)`,
    pendingRewards: '沐浴罗卜1桶 (可更换同价值礼品)'
  };

  // 营销活动信息
  const promoInfo = [
    '建良商务酒店于2025年1月24日-2026年1月24日，开展春节充值礼活动。充值活动如下：',
    '充值满500元，赠送沐浴罗卜1桶 (可更换同价值礼品)',
    '充值满1000元，赠送免费住宿次数1次 (限门市价399元以下房型)',
    '充值满5000元，赠送免费住宿次数8次 (限门市价397元以下房型)',
    '充值满10000元，赠送免费住宿次数10次和5%返利金',
    '赠送的礼品需在2026年1月25日前到店领取，过期礼品券将自动失效。赠送的免费住宿次数即时到账，永久有效。赠送的返利金即时到账，可随时提现。'
  ];

  // 充值选项数据
  const rechargeOptions = [
    { amount: '¥500.00', bonus: '赠送潍县萝卜1箱 (可更换同价值礼品)', discount: '门市价8折', price: 500, frequency: 0 },
    { amount: '¥1000.00', bonus: '赠送免费住宿次数1次 (限门市价399元以下房型)', discount: '门市价8折', price: 1000, frequency: 1 },
    { amount: '¥5000.00', bonus: '赠送免费住宿次数8次 (限门市价399元以下房型)', discount: '门市价7折', price: 5000, frequency: 8 },
    { amount: '¥10000.00', bonus: '赠送免费住宿次数10次和5%返利金', discount: '门市价6.5折', price: 10000, frequency: 10 }
  ];

  // localStorage.setItem('id', '')
  const [pricelist, setpricelist] = useState([

  ])
  const getvipprice = () => {
    axios.get(`http://localhost:3010/vipPrice`).then(res => {
      console.log(res.data.price);
      setpricelist(res.data.price)

    })
  }

  useEffect(() => {
    getvipprice()
  
  }, [])
  useEffect(() => {
    pricelist.map(e => {
      e.cid == localStorage.getItem('id') ? setPricrs(prev=>({
        ...prev,
        price:e.price,
        frequency:e.num
      })) : '';
    })
  }, [pricelist])


  const handleViptopUp = async (option) => {
    let list = pricelist.find(e => e.cid == localStorage.getItem('id'))
    console.log(list, 'list');
    console.log(option, 'option');

    if (list) {
      console.log(list);

      axios.post(`http://localhost:3010/vipPriceEdit`, { _id: list._id, price: option.price + list.price, num: (option.frequency + list.num) })

    } else {
      console.log(2);

      axios.post(`http://localhost:3010/vipPriceAdd`, { price: option.price, cid: localStorage.getItem('id'), num: option.frequency })

    }

    let res = await axios.post('http://localhost:3010/alipay', { price: option.price, name: "Vip充值" });
    console.log(res);
    alipayForm.current.innerHTML = res.data;
    // 主动调用form表单
    // document.forms 获取当前页面所有的表单集合
    document.forms[0].submit();


  }







  return (
    <div className="vip-page">
      <div ref={alipayForm}>{/* form表单 */}</div>
      <NavBar
        leftText="返回"
        title="会员中心"
        leftArrow={<ArrowLeft />}
        className="vip-navbar"
        onClickLeft={() => navigate(-1)}
      />

      <div className="vip-card">
        <div className="card-number">NO. {vipInfo.cardNumber}</div>
        <div className="card-logo">
          <div className="logo-icon">R</div>
          <div className="hotel-name">RUNSHI BUSINESS HOTEL</div>
          <div className="hotel-website">WWW.RSEDU.TOP</div>
        </div>
        <div className="vip-label">VIP CARD</div>
      </div>

      <div className="vip-info">
        <div className="info-item">
          <span className="item-label">会员卡余额：</span>
          <span className="item-value">{vipInfo.balance}</span>
        </div>
        <div className="info-item">
          {/* <span className="item-label">会员卡积分：</span> */}
          <span className="item-value">{vipInfo.points}</span>
          {/* <Tag color="#f85" className="point-tag">积分兑礼</Tag> */}
        </div>
        <div className="info-item">
          <span className="item-label">免费住宿次数：</span>
          <span className="item-value">{vipInfo.freeStays}</span>
        </div>
        <div className="info-item">
          <span className="item-label">待领取礼品：</span>
          <span className="item-value">{vipInfo.pendingRewards}</span>
        </div>
      </div>

      <div className="divider"></div>

      <div className="promo-section">
        <div className="promo-header">温馨提示：</div>
        <div className="promo-content">
          {promoInfo.map((item, index) => (
            <div key={index} className="promo-item">{item}</div>
          ))}
        </div>
        <div className="contact-info">
          <span>咨询：店内前台或致电0536-8877568</span>
        </div>
      </div>

      <div className="action-button">
        <Button
          type="primary"
          block
          round
          className="recharge-button"
          onClick={() => setShowRechargePopup(true)}
        >
          立即充值
        </Button>
      </div>

      <Popup
        visible={showRechargePopup}
        position="bottom"
        round
        closeable
        onClose={() => setShowRechargePopup(false)}
        closeIcon={<Close />}
        className="recharge-popup"
      >
        <div className="popup-content">
          <div className="popup-header-title">温馨提示</div>
          <div className="popup-intro-text">
            充值会员余额后，您将享受会员价入住和免押金入住服务，如会员卡余额过低时会员权益将失效，为更好地享受会员服务，建议会员卡余额保持在300元以上。充值金额不支持退款！
          </div>
          <div className="popup-recharge-title">会员卡余额充值</div>

          <div className="recharge-options-container">
            {rechargeOptions.map((option, index) => (
              <div key={index} className="recharge-option-card" onClick={() => handleViptopUp(option)}>

                <div className="discount-tag">{option.discount}</div>
                <div className="recharge-amount">{option.amount}</div>
                <div className="recharge-bonus">{option.bonus}</div>
              </div>
            ))}

          </div>
          <div className="popup-footer-text">
            充值其他金额享受的权益请到店咨询前台经理。
          </div>
        </div>
      </Popup>
    </div>
  );
} 